<!DOCTYPE html>
<head lang="zh-Hans">
    <meta charset="utf-8">
	<meta http-equiv="Cache-Control" content="no-cache">

	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	
	<meta name="description" content="A WebGL fluid simulation that works in mobile browsers.">

	<meta property="og:type" content="website">
	<meta property="og:title" content="Webgl Fluid Simulation">
	<meta property="og:description" content="A WebGL fluid simulation that works in mobile browsers.">
	<meta property="og:url" content="https://paveldogreat.github.io/WebGL-Fluid-Simulation/">

	<script type="text/javascript" src="dat.gui.min.js"></script>
	<style>
		@font-face {
			font-family: 'iconfont';
			src: url('iconfont.ttf') format('truetype');
		}

		* {
			user-select: none;
		}

		html, body {
			overflow: hidden;
			background-color: #000;
		}

		body {
			margin: 0;
			position: fixed;
			width: 100%;
			height: 100%;
		}

		canvas {
			width: 100%;
			height: 100%;
		}

		.dg {
			opacity: 0.9;
		}

		.dg .property-name {
			overflow: visible;
		}

		.bigFont {
			font-size: 150%;
			color: #8C8C8C;
		}

		.cr.function.appBigFont {
			font-size: 150%;
			line-height: 27px;
			color: #A5F8D3;
			background-color: #023C40;
		}

		.cr.function.appBigFont .property-name {
			float: none;
		}

		.cr.function.appBigFont .icon {
			position: sticky;
			bottom: 27px;
		}

		.icon {
			font-family: 'iconfont';
			font-size: 130%;
			float: right;
		}

		.twitter:before {
			content: 'a';
		}

		.github:before {
			content: 'b';
		}

		.app:before {
			content: 'c';
		}

		.discord:before {
			content: 'd';
		}

		.promo {
			display: none;
			/* display: table; */
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			overflow: auto;
			color: lightblue;
			background-color: rgba(0,0,0,0.4);
			animation: promo-appear-animation 0.35s ease-out;
		}

		.promo-middle {
			display: table-cell;
			vertical-align: middle;
		}

		.promo-content {
			width: 80vw;
			height: 80vh;
			max-width: 80vh;
			max-height: 80vw;
			margin: auto;
			padding: 0;
			font-size: 2.8vmax;
			font-family: Futura, "Trebuchet MS", Arial, sans-serif;
			text-align: center;
			background-image: url("promo_back.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 15px;
			box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		}

		.promo-header {
			height: 10%;
			padding: 2px 16px;
		}

		.promo-close {
			width: 10%;
			height: 100%;
			text-align: left;
			float: left;
			font-size: 1.3em;
			/* transition: 0.2s; */
		}

		.promo-close:hover {
			/* transform: scale(1.25); */
			cursor: pointer;
		}

		.promo-body {
			padding: 8px 16px 16px 16px;
			margin: auto;
		}

		.promo-body p {
			margin-top: 0;
			mix-blend-mode: color-dodge;
		}

		.link {
			width: 100%;
			display: inline-block;
		}

		.link img {
			width: 100%;
		}

		@keyframes promo-appear-animation {
			0% {
				transform: scale(2.0);
				opacity: 0;
			}
			100% {
				transform: scale(1.0);
				opacity: 1;
			}
		}
	</style>
	<script>
		window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
		ga('create', 'UA-105392568-1', 'auto');
		ga('send', 'pageview');
	</script>
	<script async src="https://www.google-analytics.com/analytics.js"></script>
	<meta name="renderer" content="webkit" >
	<title>Ikaros的主页</title>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
	<!--<script src="zoom.js"></script>-->
	<!--<script src="transition.min.js"></script>-->
	<script src="js/my.js"></script>
	<!--<link href="zoom.css" type="text/css" rel="stylesheet">-->
	<link href="css/my.css" type="text/css" rel="stylesheet">
	<link href="css/reset.min.css" type="text/css" rel="stylesheet">
	<link href="css/style.css" type="text/css" rel="stylesheet">
	<!--
	<link rel="css/stylesheet" type="text/css" href="2d/waifu1.css"/>
	<link rel="css/stylesheet" type="text/css" href="2d/flat-ui.min1.css"/>
	-->
	<link rel="shortcut icon" href="img/logo.png" type="image/x-icon" />
	<link rel="icon" href="img/logo.png" type="image/gif">
</head>
<body>
	<canvas></canvas>

	<!-- Mother of God, pls forgive me -->
	<div class="promo">
		<div class="promo-middle">
			<div class="promo-content">
				<div class="promo-header">
					<span class="promo-close">&times;</span>
				</div>
				<div class="promo-body">
					<p>Try Fluid Simulation app!</p>
					<div class="links-container">
						<a class="link" id="apple_link" target="_blank">
							<img class="link-img" alt="Download on the App Store" src="app_badge.png"/>
						</a>
						<a class="link" id="google_link" target="_blank">
							<img class="link-img" alt="Get it on Google Play" src="gp_badge.png"/>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="./script.js"></script>

	<!--<div id="container">-->
	<!--<div style="width: 10px;height: 960px;background-color: #2b2b2b" id="resizable"></div>-->
	<div id="a" style= "border:none">
		<ul id="menu" style= "width:72px;background-color: transparent;border:none">
			<li id="li1" style= "height:72px;border:none"><a href="#"></a></li>
			<li id="li2" style= "height:72px;border:none"><a href="#"></a></li>
			<li id="li3" style= "height:72px;border:none"><a href="#"></a></li>
			<li id="li4" style= "height:72px;border:none"><a href="#"></a></li>
			<li id="li5" style= "height:72px;border:none"><a href="#"></a></li>
			<li id="li6" style= "height:72px;border:none"><a href="#"></a></li>
			<li id="li7" style= "height:72px;border:none"><a href="#"></a></li>
		</ul>
		<div class="box">
			<div class="d1">
			<figure>
				<h10>昵称：伊卡酱&nbsp;&nbsp;性别：男&nbsp;&nbsp;<a href="https://gitee.com/ikaros-521/projects" target="_blank">我的码云</a>&nbsp;&nbsp;&nbsp;<a href="http://ikaros1.网址" target="_blank">我的博客</a><br>爱好：看动漫，做视频&nbsp;&nbsp;<a href="http://space.bilibili.com/3709626" target="_blank">我的b站主页</a>&nbsp;&nbsp;<a href="https://github.com/Ikaros-521" target="_blank">我的GitHub</a></h10>
				<h10>昵称：伊卡酱&nbsp;&nbsp;性别：男&nbsp;&nbsp;<a href="https://gitee.com/ikaros-521/projects" target="_blank">我的码云</a>&nbsp;&nbsp;&nbsp;<a href="http://ikaros1.网址" target="_blank">我的博客</a><br>爱好：看动漫，做视频&nbsp;&nbsp;<a href="http://space.bilibili.com/3709626" target="_blank">我的b站主页</a>&nbsp;&nbsp;<a href="https://github.com/Ikaros-521" target="_blank">我的GitHub</a></h10>
			</figure>
			</div>
			<div class="box1">
				<img id="img2" src="img/2.jpg">
				<img id="img3" src="img/3.jpg">
				<img id="img4" src="img/4.jpg">
				<img id="img6" src="img/5.jpg">
				<img id="img10" src="img/10.jpg">
			</div>
			<div class="d3">
				<audio controls="controls"  autoplay="autoplay" loop="loop">
					<source src="voice/Story-of-Mind.mp3" />
				</audio>
			</div>
			<div id="time">
			</div>
			<div class="d6">
				<a href="http://ikaros-521.gitee.io/js2048" target="_blank"><img id="img2048" src="img/2048.png"></a>
				<a href="http://ikaros-521.gitee.io/h5_3d_magic" target="_blank"><img id="3d_magic" src="img/3d_magic.png"></a>
				<a href="https://ikaros-521.gitee.io/wives/" target="_blank"><img id="wives" src="img/wives.png"></a>
				<a href="https://ikaros-521.gitee.io/the_choice_of_fate" target="_blank"><img id="fate" src="img/fate.png"></a>
				<a href="http://ikaros.xn--ses554g/WebGL/" target="_blank"><img id="WebGL" src="img/WebGL.png"></a>
			</div>
		</div>
	</div>
	<div id="img_eat"  style="opacity:1;">
		<img src="img/eat.gif" id="eat" alt="" style="width: 100px;"/>
	</div>
	<div class="d7">
		<img src="img/zfb.jpg" alt="" style="width: 150px;"/>
		<img src="img/wx.jpg" alt="" style="width: 150px;"/>
	</div>
	<!--
	<div id="layer1" style="position:absolute;left:150px;top:150px;width:150px;height:150px">
	-->
	<div id="layer1" style="position:absolute;zindex=-1" onmouseover="clearInterval(s);this.style.cursor='hand'" onmouseout="s=setInterval('move()',200)">
		<a href="#" id="b">
			<img src="img/动图.png" width="150" height="150">
		</a>
	</div>
	<div id="navbar">
	</div>
	
	<!--
	<div class="waifu">
		<div class="waifu-tips"></div>
		<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
		<div class="waifu-tool">
			<span class="fui-home"></span>
			<span class="fui-chat"></span>
			<span class="fui-eye"></span>
			<span class="fui-user"></span>
			<span class="fui-photo"></span>
			<span class="fui-info-circle"></span>
			<span class="fui-cross"></span>
		</div>
	</div>
	-->

	<div id="SMS">
	</div>
	<!--
	<div id="bottom">
		<div class="footer">
			<span>Copyright © </span><a title="www.ikaros.网址"><span>Ikaros</span></a><span>, All Rights Reserved.</span>
			<span>备案号：<a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow"><span>浙ICP备20009665号</span></a></span>
		</div>
	</div>
	-->
</body>
<!--
<script src="2d/waifu-tips.js"></script>
<script src="2d/live2d.js"></script>
<script type="text/javascript">initModel()</script>
-->
</html>